<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="topDiv">
      <div class="floatDiv">float left</div>
      <div class="textDiv">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
    </div>
    <div class="bottomDiv">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
  </body>
</html>

<style>
  .topDiv {
    width: 500px;
    border: 2px solid black;
  }
  .floatDiv {
    width: 100px;
    height: 100px;
    border: 2px dotted red;
    color: red;
    margin: 4px;
    float: left;
  }
  .bottomDiv {
    width: 500px;
    height: 100px;
    margin: 5px 0;
    border: 2px dotted black;
  }
  .textDiv {
    color: blue;
    border: 2px solid blue;
    clear: left;
  }
</style>
